<template>
  <div id="footer">
    <ul>
      <li v-for="item in menus">
        <router-link :to="item.path" :class="[item.isActive ? 'active-item' : '', item.name === '首页' ? 'home' : '']">
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import router from '@/router'
import { ref, watch } from 'vue'

const menusData = [
  {
    name: "实时轨迹",
    path: "/RealtimeTrajectory",
    isActive: false,
  },
  {
    name: "重点活动",
    path: "/KeyActivities",
    isActive: false,
  },
  {
    name: "首页",
    path: "/home",
    isActive: true,
  },
  {
    name: "发展历程",
    path: "/DevelopmentHistory",
    isActive: false,
  },
  {
    name: "站点管理",
    path: "/StationManagement",
    isActive: false,
  }
]
const menus = ref(menusData)

watch(router.currentRoute, (value) => {
  menus.value = menus.value.map(menu => {
    if (menu.path === value.path) {
      // console.log(n);
      menu.isActive = true
    } else {
      menu.isActive = false
    }
    return menu
  })
})
</script>

<style scoped lang="scss">
#footer {
  width: 100%;
  height: 73px;
  position: absolute;
  left: 50%;
  bottom: 0.521vw;
  transform: translateX(-50%);
  background: url('../assets/uiResources/footer.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 999;

  ul .active-item {
    color: #ec9b02;
    font-size: 12px;
  }

  ul {
    width: 28%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
    margin-top: 10px;

    a {
      color: #fff;
      font-size: 12px;
      text-decoration: none;
    }

    li {
      color: #fff;
      cursor: pointer;
    }

    a:hover {
      color: rgb(97, 89, 89);
    }


    .home {
      display: inline-block;
      transform: translateY(-3px);
    }
  }

}
</style>